<!DOCTYPE html>
<html>
	<head>
		<meta charset="GB2312">
		<title></title>
	<style>
		*{padding: 0;margin: 0;}
		a{text-decoration: none;}
		li{list-style-type: none;}
		#obod{width: 1200px;height: 520px;;margin:0px 100px;z-index: 10;position: relative;}
		#List{width: 200px;background:#6e6568;padding: 20px 0px;}
		#List>li{list-style-type: none;color: #fff;height: 30px; padding:0 10px;}
		#List>li:hover .Box{display: block}
		#List>li:hover{background: #aaaaaa;}
		#List>li>a{ text-decoration: none;color: #fff; font:14px/30px""; }
		#List>li>a:hover{color: #b20000;}
		.Box{background: #f2f2f2;position: absolute;left:200px;top: 0px;padding: 10px;display: none;box-sizing: border-box;overflow: hidden;}
		.left{float:left;width: 700px; }
		.right{float: left;width: 200px;margin-left: 10px;}
		span.ss{float: right;}


		dl{display: block;overflow: hidden;margin: 2px 0;border-bottom: 1px solid #dcdcdc;padding: 5px;}
		dd{float: left; font: 12px/18px "";color: #666;border-right:1px solid #d3d2d1;text-align: center;padding:0px 8px;margin: 4px 0; }
		dl dd:last-child{ border: none}
		dt{float: left;display: inline-block; font:900 12px/24px "";color: #000;margin: 5px;}
		dd:hover{color:#b20000;cursor: pointer; }
		.title a{display: inline-block; padding: 2px 5px; background:#6e6568;margin: 0 5px;color: #fff; font: 12px/24px""; }
		.title a:hover{background: #4d4748;  }
		dt{ width: 60px;}
		#List>li:nth-child(5) dt:nth-child(1) dt{ height: 85px;}
		#List>li:nth-child(1) dl:nth-child(7) dt{ height: 85px;}
		#List>li:nth-child(1) dl:nth-child(8) dt{ height: 85px;}
		#List>li:nth-child(9) dl:nth-child(7) dt{ height: 85px;}
		#List>li:nth-child(9) dl:nth-child(6) dt{ height: 85px;}
		.oul{display: flex;justify-content: space-between;width: 173px;height: 150px;flex-wrap: wrap;margin-bottom:10px;}
		.oLL{width: 85px;height: 35px;}
		.oul img{width: 85px;height: 35px;}
		.right>img{ width: 168px;height: 134px;}

	</style>

	</head>

	<body>
<!--	<p class="meng"></p>-->
<div id="obod">
	<ul id="List">

	</ul>

</div>
	</body>
	<script type="text/javascript">
        //锟斤拷锟斤拷锟街诧拷图 --  锟接匡拷锟皆硷拷锟斤拷
        var sc = document.createElement('script');
        sc.src = 'https://dc.3.cn/category/get?callback=getCategoryCallback';
        document.body.appendChild(sc);
        //锟斤拷取ul元锟截憋拷签
        var List = document.getElementById("List");


        //锟斤拷装锟斤拷取锟街凤拷 锟斤拷锟斤拷
        function getStr(str) {
            var x = str.split("|");
            var y = x[1];
            return y
        }
        //锟斤拷装锟斤拷取锟街凤拷 图片锟斤拷址
        function getStr2(str) {
            var x = str.split("|");
            var y = x[2];
            return y
        }
	</script>

	<script>
        function getCategoryCallback(res) {
            var box = document.getElementById("box");
            console.log(res);
            //锟斤拷锟斤拷锟芥储锟斤拷印li锟侥憋拷锟斤拷
            var str = "";
            //循锟斤拷 res.data
            for (var i in res.data) {
                //拼锟斤拷 li 锟街凤拷
                str += "<li class='oLI'></li>"
            }
            //锟斤拷印 str 锟街凤拷 锟斤拷ul锟斤拷
            List.innerHTML = str;
            //循锟斤拷 res.data
            var Li = List.getElementsByClassName("oLI");
			console.log(Li);
            for (var i in res.data) {
                //锟斤拷锟斤拷一锟斤拷div
                var Box = document.createElement("div");
                var oLeft = document.createElement("div");
                var oRight = document.createElement("div");
                var oul = document.createElement("ul")
                //锟斤拷锟斤拷box锟斤拷
                Li[i].appendChild(Box);
                Box.appendChild(oLeft);
                Box.appendChild(oRight);


                oRight.appendChild(oul);

                /*oul.innerHTML = '111';*/
                //循锟斤拷 res.data[i].b 锟斤拷印 logo图片
                for (var j in res.data[i].b) {
                    //锟斤拷锟斤拷 img锟斤拷li锟斤拷签
                    var img = document.createElement("img");
                    var LL = document.createElement("li");
                    //锟斤拷li锟斤拷签 锟斤拷签 锟斤拷Class取锟斤拷
                    LL.className="oLL";
                    //锟斤拷锟斤拷 li锟斤拷签 锟斤拷oul锟节ｏ拷锟斤拷锟斤拷img锟斤拷签锟斤拷li锟斤拷
                    oul.appendChild(LL);
                    LL.appendChild(img);
                    //res.data[i].p[j]锟街凤拷锟饺★拷锟斤拷锟�
                    var zb = getStr2(res.data[i].b[j]);
					 //锟斤拷图片写锟斤拷锟街�
                    img.src = "https://img10.360buyimg.com/" + zb;

                }
                //循锟斤拷 res.data[i].p 锟斤拷印 锟斤拷图片
                for(var j in res.data[i].p){
                    //res.data[i].p[j]锟街凤拷锟饺★拷锟斤拷锟�
                    var zv = getStr2(res.data[i].p[j]);
                    //锟斤拷锟斤拷img图片
                    var imgx = document.createElement("img");
                    //锟斤拷图锟斤拷址
                    imgx.src = "https://img10.360buyimg.com/" + zv;
                  //锟斤拷锟斤拷 img图片
                    oRight.appendChild(imgx);
				}

                    //锟斤拷锟斤拷div锟斤拷Class锟斤拷锟斤拷取锟斤拷Box锟斤拷
                Box.className = "Box";
                //锟斤拷锟斤拷oLeft锟斤拷Class锟斤拷锟斤拷取锟斤拷left锟斤拷
                oLeft.className = "left";
                //锟斤拷锟斤拷 oRight锟斤拷Class锟斤拷锟斤拷取锟斤拷right锟斤拷
                oRight.className = "right";
                oul.className="oul";
                //锟斤拷锟斤拷 p锟斤拷签
                var P = document.createElement("p");
                //锟斤拷P锟斤拷签取Class锟斤拷 锟斤拷title锟斤拷;
                P.className = "title";
                //锟斤拷Box锟节诧拷锟斤拷 P锟斤拷签
                oLeft.appendChild(P);
                //循锟斤拷 res.data[i].t
                for (var k in res.data[i].t) {
                    //res.data[i].t[k]锟街凤拷锟饺★拷锟斤拷锟�
                    var t = getStr(res.data[i].t[k]);
                    //锟斤拷a锟斤拷签锟斤拷锟斤拷锟斤拷写锟斤拷 P锟斤拷签锟斤拷
                    P.innerHTML += `<a href="#">${t} <span class="ss">  ></span>  </a>`;
                }

                //循锟斤拷 res.data[i].s ( 锟斤拷取li锟斤拷锟斤拷锟斤拷锟斤拷锟�
                for (var j in res.data[i].s) {

                    //循锟斤拷 res.data[i].s[j].s
                    for (var m in  res.data[i].s[j].s) {
                        //res.data[i].s[j].s[m].n锟街凤拷锟饺★拷锟斤拷锟�
                        var zx = getStr(res.data[i].s[j].s[m].n);
                        //锟斤拷锟斤拷 dl 锟斤拷dt 锟斤拷签
                        var dl = document.createElement("dl");
                        var dt = document.createElement("dt");
                        // 锟斤拷Box锟斤拷锟斤拷锟斤拷锟�l锟斤拷签
                        oLeft.appendChild(dl);
                        // 锟斤拷dl锟斤拷锟斤拷锟斤拷锟�t锟斤拷签
                        dl.appendChild(dt);
                        // 锟斤拷dt锟斤拷锟斤拷锟捷革拷值
                        dt.innerHTML = zx + '<span class="ss"> ></span>';
                        // 循锟斤拷  res.data[i].s[j].s[m].s
                        for (var n in  res.data[i].s[j].s[m].s) {
                            //  锟斤拷锟斤拷dd锟斤拷签
                            var dd = document.createElement("dd");
                            //res.data[i].s[j].s[m].s[n].n锟街凤拷锟饺★拷锟斤拷锟�
                            var zy = getStr(res.data[i].s[j].s[m].s[n].n);
                            //锟斤拷dl锟节诧拷锟斤拷dd锟斤拷签
                            dl.appendChild(dd);
                            //锟斤拷dt锟斤拷锟捷革拷值
                            dd.innerHTML = zy;
                        }


                    }
                    //res.data[i].s[j].n锟街凤拷锟饺★拷锟斤拷锟�

                    var s = getStr(res.data[i].s[j].n);

                    //锟斤拷锟街凤拷拼锟接的凤拷锟斤拷锟斤拷锟斤拷a锟斤拷签锟斤拷锟斤拷应锟斤拷li锟斤拷
                    List.children[i].innerHTML += `<span> / </span><a href="##">${s}</a>`
                    //

                }


            }

            //删锟斤拷/锟斤拷锟斤拷span锟斤拷签锟斤拷
            var oBox = List.getElementsByClassName("Box");
            console.log(oBox)

            for (let i = 0; i < Li.length; i++) {
                //删锟斤拷锟揭伙拷锟�pan锟斤拷签 "/"
                Li[i].children[1].remove();

                //锟斤拷锟诫弹锟斤拷锟斤拷锟斤拷锟剿碉拷
              /*  Li[i].onmouseover = function () {
                    oBox[i].style.display = "block"
                }
                //锟狡筹拷锟截闭讹拷锟斤拷锟剿碉拷
                Li[i].onmouseout = function () {
                        oBox[i].style.display = "none";
            }*/

            }


        }








	</script>
</html>
